<script lang="ts">
    import { actixGraphqlEndpoint } from "$lib/js/stores";
    import { request, gql } from "graphql-request";

    import {
        useQuery,
        useMutation,
        useQueryClient,
    } from "@sveltestack/svelte-query";
    import type { File, QuizItem, KV, Nodedge } from "$lib/ebm";
    export let attributes: KV[] = [
        {
            k: "subject",
            v: "en",
        },
    ];

    let file_id = attributes.find((x) => x.k == "file_id");

    let endpoint = $actixGraphqlEndpoint;
    const FILE_QUERY = gql`
        query {
            node(id: "${file_id.v}") {
                id
                createdAt
                updatedAt
                ... on File {
                    snapshotAt
                    fileName
                    fileMode
                    fileOwner
                    fileGroup
                    fileSize
                    title
                    description
                    content
                    status
                    folderId
                    from
                    wordens{
                      id
                      word
                    }
                }
            }
        }
    `;

    const queryFileResult = useQuery<File, { message: string }>(
        ["file", file_id],
        async () => {
            const { node } = await request(endpoint, FILE_QUERY);
            return node;
        }
    );

    const queryClient = useQueryClient();
    const mutation = useMutation<
        File,
        { message: string },
        {
            file_id: string;
            content_: string;
        }
    >(
        async ({ file_id, content_ }) => {
            const { file } = await request(
                endpoint,
                gql`
                    mutation ($fileId: ID!, $content: String!) {
                        file: updateFile(
                            fileId: $fileId
                            input: { content: $content }
                        ) {
                            id
                            snapshotAt
                            fileName
                            fileMode
                            fileOwner
                            fileGroup
                            fileSize
                            title
                            description
                            content
                            createdAt
                            updatedAt
                            status
                            folderId
                            from
                        }
                    }
                `,
                {
                    fileId: file_id,
                    content: content_,
                }
            );
            return file;
        },
        {
            onSuccess: () => {
                queryClient.invalidateQueries("file");
            },
        }
    );

    let words: string[] = [
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
        "word1",
    ];
</script>

<div class="w-full h-full overflow-scroll">
    file_id.v={file_id.v}
    {#if $queryFileResult.isLoading}
        <p>Loading...</p>
    {:else if $queryFileResult.isError}
        <p>Error {$queryFileResult.error}</p>
    {:else if $queryFileResult.data}
    <ul class="w-full h-full flex flex-wrap overflow-y-scroll mb-8">
        <li
            class="p-2 flex-grow-0 flex-nowrap border-2 border-solid border-green-100 bg-blue-300 hover:bg-green-300 item-center cursor-pointer"
        >
            <span>Add All</span>
            <i class="fas fa-plus" />
        </li>
        {#each $queryFileResult.data.wordens as word}
            <li
                class="p-2 bg-rose-100 flex-grow-0 flex-nowrap border-2 border-solid border-green-100 hover:bg-green-300"
            >
                <span>{word.word}</span>
                <i class="fas fa-plus cursor-pointer" />
            </li>
        {/each}
        <li
            class="p-2 flex-grow-0 flex-nowrap border-2 border-solid border-green-100 bg-blue-300 hover:bg-green-300 item-center cursor-pointer"
        >
            <span>Add All</span>
            <i class="fas fa-plus" />
        </li>
    </ul>
    {:else}
        No wordens found!
    {/if}
</div>
